functions php未能加载自定义JS的解决办法

2024年7月18日 · 阅读需 3 分钟

在开发或修改 WordPress 主题时，我们常常需要添加自定义的 JavaScript 文件。然而，有时候即使我们正确地在 functions.php 文件中排队（enqueue）了这些脚本，它们仍然不会加载。在这篇博客中，我将分享一个真实的案例，描述问题的发现、排查过程以及最终的解决方案。

问题背景

我在 functions.php 文件中使用了 wp_enqueue_script 函数来添加自定义的 JavaScript 文件，但在检查网页时，发现脚本并没有正确加载。即使尝试了各种方法，包括检查文件路径和权限，问题依旧存在。

排查和纠错过程

验证 functions.php 文件是否被正确加载

我首先确保 functions.php 文件被正确加载。为此，我添加了一些调试信息：
```
<?php
error_log('functions.php is loaded'); // 输出日志到服务器日志文件
?>
```

确保 wp_enqueue_script 函数被调用

我在 functions.php 文件中进一步添加调试信息来确认 wp_enqueue_script 函数是否被调用：

<?php
if (!function_exists('my_theme_enqueue_scripts')) {
    function my_theme_enqueue_scripts() {
        error_log('my_theme_enqueue_scripts function called'); // 调试输出

        // 检查 jQuery 是否被正确加载
        if (!wp_script_is('jquery', 'enqueued')) {
            wp_enqueue_script('jquery');
        }

        // 注册并排队自定义的 JavaScript 文件
        wp_enqueue_script(
            'custom-js',
            get_template_directory_uri() . '/js/custom.js',
            array('jquery'),
            null,
            true
        );

        error_log('custom.js path: ' . get_template_directory_uri() . '/js/custom.js'); // 调试输出
    }

    add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
}
?>

检查 get_template_directory_uri() 的输出

为确保 get_template_directory_uri() 返回正确的 URL，我添加了以下代码：
```
<?php
error_log('Template Directory URI: ' . get_template_directory_uri());
?>
```
检查文件路径和权限

我确保 js/custom.js 文件存在且具有正确的读取权限。目录结构如下：
```
your-theme/
│
├── functions.php
├── js/
│   └── custom.js
└── ...
```
文件权限为 644，目录权限为 755。

使用 wp_head 钩子进行测试

我尝试使用 wp_head 钩子直接输出脚本标签进行测试：

<?php
if (!function_exists('my_theme_enqueue_scripts')) {
    function my_theme_enqueue_scripts() {
        echo '<script src="' . get_template_directory_uri() . '/js/custom.js"></script>';
    }

    add_action('wp_head', 'my_theme_enqueue_scripts');
}
?>

检查主题的 header.php 文件

警告

最终，我发现问题的根源在于 header.php 文件中缺少 wp_head() 函数调用。

确保你的 header.php 文件包含以下代码：

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

同时，确保 footer.php 文件中包含 wp_footer() 函数调用：

    <?php wp_footer(); ?>
</body>
</html>

解决方案总结

通过确保在 header.php 和 footer.php 文件中包含 wp_head() 和 wp_footer() 函数调用，问题得以解决。wp_head() 和 wp_footer() 是 WordPress 主题中非常重要的钩子，它们允许插件和主题在页面头部和底部添加必要的代码。

结语

在 WordPress 主题开发中，细节往往决定了最终的结果。通过这个案例，我们学到了在排查问题时需要从多个角度进行检查，包括文件加载、函数调用、路径和权限等。如果你在开发过程中遇到了类似的问题，希望这篇博客能对你有所帮助

问题背景​

排查和纠错过程​

解决方案总结​

结语​

问题背景

排查和纠错过程

解决方案总结

结语